<template>
  <div class="login-wrapper">
    <div class="login-background"></div>
    <div class="login-content">
      <div class="login-header">
        <h2 class="login-brand">{{ $t("brand.lg") }}</h2>
      </div>
      <div class="login-body">
        <!-- <h3 class="login-title">{{ $t("login.title") }}</h3> -->
        <el-form
          :model="dataForm"
          :rules="dataRule"
          ref="dataForm"
          @keyup.enter.native="dataFormSubmitHandle()"
          status-icon
        >
          <el-form-item prop="username">
            <el-input 
              v-model="dataForm.username" 
              :placeholder="$t('login.username')"
              class="animated-input"
            >
              <span slot="prefix" class="el-input__icon">
                <svg class="icon-svg" aria-hidden="true" style="color: #409EFF;">
                  <use xlink:href="#icon-user"></use>
                </svg>
              </span>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="dataForm.password"
              type="password"
              :placeholder="$t('login.password')"
            >
              <span slot="prefix" class="el-input__icon">
                <svg class="icon-svg" aria-hidden="true">
                  <use xlink:href="#icon-lock"></use>
                </svg>
              </span>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="dataFormSubmitHandle()"
              class="w-percent-100 login-button"
              >{{ $t("login.title") }}</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="login-footer">
        <p>
          <a href="#" target="_blank">{{ $t("login.copyright") }}</a
          >2022 © 聚会投
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import debounce from "lodash/debounce";
import { getUUID } from "@/utils";

export default {
  data() {
    return {
      captchaPath: "",
      dataForm: {
        username: "",
        password: "",
        uuid: "",
        captcha: "",
      },
    };
  },
  computed: {
    dataRule() {
      return {
        username: [
          { required: true, message: this.$t("validate.required"), trigger: "blur" },
        ],
        password: [
          { required: true, message: this.$t("validate.required"), trigger: "blur" },
        ],
      };
    },
  },
  created() {
    this.getCaptcha();
  },
  methods: {
    getCaptcha() {
      this.dataForm.uuid = getUUID();
      this.captchaPath = `${window.SITE_CONFIG["apiURL"]}/captcha?uuid=${this.dataForm.uuid}`;
    },
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs["dataForm"].validate((valid) => {
          if (!valid) {
            return false;
          }
          this.$http
            .post("/login", this.dataForm)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                this.getCaptcha();
                return this.$message.error(res.msg);
              }
              Cookies.set("token", res.data.token);
              this.$router.replace({ name: "home" });
            })
            .catch(() => {});
        });
      },
      1000,
      { leading: true, trailing: false }
    ),
  },
};
</script>

<style scoped>
.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #667eea, #764ba2);
  overflow: hidden;
}

.login-background {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('/src/assets/img/login_bg.jpg') no-repeat center center;
  background-size: cover;
  filter: blur(8px);
  z-index: 1;
}

.login-content {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  width: 100%;
}

.login-header {
  text-align: center;
  margin-bottom: 20px;
}

.login-brand {
  font-size: 32px;
  font-weight: bold;
  color: #333;
}

.login-body {
  margin-bottom: 20px;
}

.login-title {
  text-align: center;
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

.animated-input {
  width: 100%;
}

.login-button {
  width: 100%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.login-button:hover {
  transform: scale(1.05);
}

.login-footer {
  text-align: center;
  font-size: 14px;
  color: #666;
}

.login-footer a {
  color: #667eea;
  text-decoration: none;
}

.login-footer a:hover {
  text-decoration: underline;
}
</style>
